Grid Layout
グリッドレイアウトについて備忘録。
親に指定するプロパティ
以下のように指定すればグリッドレイアウトが使える。beco.icon かんたん。
code: css
.grid {
display: grid;
}
grid-template-area
あらかじめ子に grid-area で名前をつけておく必要がある。
beco.icon 名前をもとにレイアウトを決められる
beco.icon コンテンツが入る一番外側のレイアウトを作るときに便利。
基本のサイズ指定
grid-template-columns - 横方向のサイズの指定
grid-template-rows - 縦方向のサイズの指定
子が溢れたときの指定
grid-auto-columns - 横方向の暗黙的なサイズの指定
grid-auto-rows - 縦方向の暗黙的なサイズの指定
サイズの指定方法
数字 / auto / 1fr
auto は子の要素しだい
1frはひとマス分。
beco.icon fraction(分数の意味)の略らしい。
repeat - 繰り返しで指定できる
minmax - 最小値と最大値の指定
余白
column-gap - 横方向の余白
row-gap - 縦方向の余白
余白のショートハンド
gap - 2つ値を与えるときは gap column たて よこの順。
beco.icon 過去は grid-column-gap のように頭に grid- がついていた。今はつけてもつけなくてもOKらしい。
子に指定するプロパティ
grid-area
grid-area: header; grid-area: main; grid-area: sidebar; とか
beco.icon 名前をつけてわかりやすくできる。ダブルクオーテーションは不要。
beco.icon コンテンツが入る一番外側のレイアウトを作るときに便利。
マス目（グリッド）で大きさを指定
grid-column-start 横方向の開始位置
grid-column-end 横方向の終了位置
grid-row-start 縦方向の開始位置
grid-row-end 横方向の終了位置
ショートハンド
スラッシュで区切って書く
grid-column
grid-row
grid-column: 1/-1 なら左端から右端まで
マイナス値は逆方向から数えた位置
参考
posted: 2022/8/13
関連